<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转的太极图</title>
	<style>
		*{padding:0;margin:0;}
		body{
			background-color:#ccc;
		}
		#did{
			position:absolute;
			left:400px;
			top:100px;
			width:400px;
			height:200px;
			background-color:#000;
			border:1px solid #fff;
			border-width:0px 0px 200px 0px;
			border-radius:50%;
		}
		#did::before{
			content:"太极生两仪";
			width:60px;
			height:60px;
			line-height:60px;
			font-size:12px;
			background-color:#fff;
			border:70px solid #000;
			position:absolute;
			left:0;
			top:100px;
			border-radius:50%;
		}
		#did::after{
			content:"两仪生四象";
			width:60px;
			height:60px;
			line-height:60px;
			color:#fff;
			font-size:12px;
			background-color:#000;
			border:70px solid #fff;
			position:absolute;
			right:0;
			top:100px;
			border-radius:50%;
		}
		#btn{
			width:120px;
			height:40px;
			font-size:24px;
			outline:none;
			border:0;
			background-color:#ff6700;
			margin-left:520px;
			cursor:pointer;
		}
	</style>
</head>
<body>
	<button id="btn" >开始/暂停</button>
	<div id="did" ></div>
</body>
	<script>
			
		did = document.getElementById("did");
		dge=0;
		btn = document.getElementById("btn");
		mytime=null;
		btn.onclick=function(){
			if(mytime==null){
				mytime=setInterval(function(){
					dge+=5;
					did.style.transform="rotate("+dge+"deg)";
				},10);
			}else{
				clearInterval(mytime);
				mytime=null;
			}
			
		}
	</script>
</html>